<template>
  <div id="ownIndexPage" @click="bodyClick">
    <HeadNav
      type="publish"
      ref="head"
      :show="1"
      @publisherChange="publisherChange()"
    ></HeadNav>
    <div class="wd-1220">
      <div class="clearfix">
        <div class="float-left">
          <SlideNav type="publish" sort="index"></SlideNav>
        </div>
        <div class="float-right">
          <div class="main-container">
            <!-- 本社综合概况 -->
            <div class="general-descrip model-container">
              <div class="section-title model-bg">本社综合概况</div>
              <div class="general-container model-bg" v-if="generalPower">
                <div class="content">
                  <div class="data-block">
                    <div>
                      <a-icon type="line-chart" />
                      <span class="secondary-font">在售品种数</span>
                    </div>
                    <div class="data-font" v-if="account.on_sale_num">
                      {{ account.on_sale_num.toLocaleString() }}
                    </div>
                    <div class="data-font" v-else>0</div>
                  </div>
                  <div class="data-block" style="margin-top: 10px">
                    <div>
                      <a-icon type="line-chart" />
                      <span class="secondary-font">读者基数</span>
                    </div>
                    <div class="data-font" v-if="account.reader_num">
                      {{ account.reader_num.toLocaleString() }}
                    </div>
                    <div class="data-font" v-else>0</div>
                  </div>
                </div>
                <!-- 在售品种结构 -->
                <div
                  class="content"
                  style="width: 370px; margin-right: 60px; margin-left: 50px"
                >
                  <div class="descrip">
                    在售品种结构
                    <!-- <a-popover
                      placement="topLeft"
                      trigger="click"
                      :align="{ offset: [-7, 3] }"
                    >
                      <template slot="content">
                        <div style="font-size: 12px; color: #7789af">
                          本社所有在售品种中，按不同品种类型区分，每个类型的品种数量。品种类型定义如下：<br />新品品种：出版时间在360天以内的品种<br />一般品种：出版时间在360天以上，近90天月均销售0册以上、100册以下的品种<br />常销品种：出版时间在360天以上，近90天月均销售100册以上、1000册以下的品种<br />畅销品种：出版时间在360天以上，近90天月均销售1000册以上的品种<br />滞销品种：出版时间在360天以上，近90天月均销售0册的品种
                        </div>
                      </template>
                      <span
                        style="
                          cursor: pointer;
                          color: #93a2bf;
                          line-height: normal;
                          font-size: 15px;
                          display: inline-block;
                          vertical-align: middle;
                        "
                      >
                        <svg class="icon" aria-hidden="true">
                          <use xlink:href="#icon-tips" />
                        </svg>
                      </span>
                    </a-popover> -->
                  </div>
                  <div id="cow-chart"></div>
                </div>
                <!-- 销售占比结构 -->
                <div class="content" style="width: 320px">
                  <div class="descrip">
                    销售占比结构（按平均月销量分析）
                    <a-popover
                      placement="topRight"
                      trigger="click"
                      :align="{ offset: [6, 3] }"
                    >
                      <template slot="content">
                        <div style="font-size: 12px; color: #7789af">
                          分析不同月销层级的品种在本社整体码洋中的占比，数据基于上月销售数据。
                        </div>
                      </template>
                      <span
                        style="
                          cursor: pointer;
                          color: #93a2bf;
                          line-height: normal;
                          font-size: 15px;
                          display: inline-block;
                          vertical-align: middle;
                        "
                      >
                        <svg class="icon" aria-hidden="true">
                          <use xlink:href="#icon-tips" />
                        </svg>
                      </span>
                    </a-popover>
                  </div>
                  <div id="radar"></div>
                </div>
              </div>
              <div
                class="model-bg"
                style="height: 260px; position: relative"
                v-else
              >
                <ModelNoPower
                  type="noPower"
                  :id="generalPowerID"
                  :organizeId="$refs.head.publishInfo.organization_id"
                ></ModelNoPower>
              </div>
            </div>
            <!-- 选择品种，日期 -->
            <a-affix :offset-top="36" v-if="corePower">
              <div class="model-container">
                <div class="model-bg clearfix choose">
                  <div class="float-left">
                    <a-cascader
                      :field-names="{
                        label: 'name',
                        value: 'category_id',
                        children: 'child_list',
                      }"
                      :options="categoryList"
                      placeholder="所有类目"
                      change-on-select
                      :allowClear="false"
                      :popupVisible="catePopup"
                      expand-trigger="hover"
                      v-model="chooseCategory"
                      @click.stop="cateClick"
                      @change="selectCategory"
                    />
                  </div>
                  <div class="float-right">
                    <TimeChoose
                      ref="time"
                      :dateShow="true"
                      @changeTime="changeTime"
                      @closeDom="closeDom"
                    ></TimeChoose>
                  </div>
                </div>
              </div>
            </a-affix>
            <!-- 核心数据监控 -->
            <div class="model-container core-data">
              <div class="section-title model-bg">核心数据监控</div>
              <div class="content model-bg" v-if="corePower">
                <div class="clearfix">
                  <!-- 销售指数 -->
                  <span
                    :class="
                      typeText == 'sale_total'
                        ? 'data-block float-left active'
                        : 'data-block float-left'
                    "
                    @click="coreTypeChange('sale_total')"
                  >
                    <div>
                      <a-icon type="line-chart" />
                      <span class="secondary-font">销售指数</span>
                    </div>
                    <div class="data-font" v-if="sale_total_info.now">
                      {{ sale_total_info.now.toLocaleString() }}
                    </div>
                    <div class="data-font" v-else>0</div>
                    <div class="clearfix compare" style="width: 160px">
                      <div class="float-left" v-if="dateType == 1">
                        昨日对比
                      </div>
                      <div class="float-left" v-if="dateType == 2">
                        上周对比
                      </div>
                      <div class="float-left" v-if="dateType == 3">
                        上月对比
                      </div>
                      <div class="float-left" v-if="dateType == 4">
                        上年对比
                      </div>
                      <div
                        class="float-right up-number"
                        v-if="sale_total_info.pre_compare > 0"
                      >
                        {{ sale_total_info.pre_compare }}% ↑
                      </div>
                      <div
                        class="float-right down-number"
                        v-if="sale_total_info.pre_compare < 0"
                      >
                        {{ sale_total_info.pre_compare * -1 }}% ↓
                      </div>
                      <div
                        class="float-right down-number"
                        v-if="sale_total_info.pre_compare == 0"
                      >
                        {{ sale_total_info.pre_compare }}
                      </div>
                      <div
                        class="float-right down-number"
                        v-if="sale_total_info.pre_compare == '--'"
                      >
                        {{ sale_total_info.pre_compare }}
                      </div>
                    </div>
                    <div class="clearfix compare" style="width: 160px">
                      <div class="float-left">上年同期</div>
                      <div
                        class="float-right up-number"
                        v-if="sale_total_info.last_compare > 0"
                      >
                        {{ sale_total_info.last_compare }}% ↑
                      </div>
                      <div
                        class="float-right down-number"
                        v-if="sale_total_info.last_compare < 0"
                      >
                        {{ sale_total_info.last_compare * -1 }}% ↓
                      </div>
                      <div
                        class="float-right down-number"
                        v-if="sale_total_info.last_compare == 0"
                      >
                        {{ sale_total_info.last_compare }}
                      </div>
                      <div
                        class="float-right down-number"
                        v-if="sale_total_info.last_compare == '--'"
                      >
                        {{ sale_total_info.last_compare }}
                      </div>
                    </div>
                  </span>
                  <!-- 销售排名 -->
                  <span
                    :class="
                      typeText == 'sale_rank'
                        ? 'data-block float-left active'
                        : 'data-block float-left'
                    "
                    @click="coreTypeChange('sale_rank')"
                  >
                    <div>
                      <a-icon type="line-chart" />
                      <span class="secondary-font">销售排名</span>
                    </div>
                    <div class="data-font" v-if="sale_rank_info.now">
                      {{ sale_rank_info.now }}
                    </div>
                    <div class="data-font" v-else>0</div>
                    <div class="clearfix compare" style="width: 160px">
                      <div class="float-left" v-if="dateType == 1">
                        昨日对比
                      </div>
                      <div class="float-left" v-if="dateType == 2">
                        上周对比
                      </div>
                      <div class="float-left" v-if="dateType == 3">
                        上月对比
                      </div>
                      <div class="float-left" v-if="dateType == 4">
                        上年对比
                      </div>
                      <div
                        class="float-right down-number"
                        v-if="sale_rank_info.pre_compare > 0"
                      >
                        {{ sale_rank_info.pre_compare }} ↓
                      </div>
                      <div
                        class="float-right up-number"
                        v-if="sale_rank_info.pre_compare < 0"
                      >
                        {{ sale_rank_info.pre_compare * -1 }} ↑
                      </div>
                      <div
                        class="float-right down-number"
                        v-if="sale_rank_info.pre_compare == 0"
                      >
                        {{ sale_rank_info.pre_compare }}
                      </div>
                      <div
                        class="float-right down-number"
                        v-if="sale_rank_info.pre_compare == '--'"
                      >
                        {{ sale_rank_info.pre_compare }}
                      </div>
                    </div>
                    <div class="clearfix compare" style="width: 160px">
                      <div class="float-left">上年同期</div>
                      <div
                        class="float-right down-number"
                        v-if="sale_rank_info.last_compare > 0"
                      >
                        {{ sale_rank_info.last_compare }} ↓
                      </div>
                      <div
                        class="float-right up-number"
                        v-if="sale_rank_info.last_compare < 0"
                      >
                        {{ sale_rank_info.last_compare * -1 }} ↑
                      </div>
                      <div
                        class="float-right down-number"
                        v-if="sale_rank_info.last_compare == 0"
                      >
                        {{ sale_rank_info.last_compare }}
                      </div>
                      <div
                        class="float-right down-number"
                        v-if="sale_rank_info.last_compare == '--'"
                      >
                        {{ sale_rank_info.last_compare }}
                      </div>
                    </div>
                  </span>
                  <!-- 市场占有率 -->
                  <span
                    :class="
                      typeText == 'sale_ratio'
                        ? 'data-block float-left active'
                        : 'data-block float-left'
                    "
                    @click="coreTypeChange('sale_ratio')"
                  >
                    <div>
                      <a-icon type="line-chart" />
                      <span class="secondary-font">市场占有率</span>
                    </div>
                    <div class="data-font" v-if="sale_ratio_info.now">
                      {{ sale_ratio_info.now }}%
                    </div>
                    <div class="data-font" v-else>0%</div>
                    <div class="clearfix compare" style="width: 160px">
                      <div class="float-left" v-if="dateType == 1">
                        昨日对比
                      </div>
                      <div class="float-left" v-if="dateType == 2">
                        上周对比
                      </div>
                      <div class="float-left" v-if="dateType == 3">
                        上月对比
                      </div>
                      <div class="float-left" v-if="dateType == 4">
                        上年对比
                      </div>
                      <div
                        class="float-right up-number"
                        v-if="sale_ratio_info.pre_compare > 0"
                      >
                        {{ sale_ratio_info.pre_compare }}% ↑
                      </div>
                      <div
                        class="float-right down-number"
                        v-if="sale_ratio_info.pre_compare < 0"
                      >
                        {{ sale_ratio_info.pre_compare * -1 }}% ↓
                      </div>
                      <div
                        class="float-right down-number"
                        v-if="sale_ratio_info.pre_compare == 0"
                      >
                        {{ sale_ratio_info.pre_compare }}
                      </div>
                      <div
                        class="float-right down-number"
                        v-if="sale_ratio_info.pre_compare == '--'"
                      >
                        {{ sale_ratio_info.pre_compare }}
                      </div>
                    </div>
                    <div class="clearfix compare" style="width: 160px">
                      <div class="float-left">上年同期</div>
                      <div
                        class="float-right up-number"
                        v-if="sale_ratio_info.last_compare > 0"
                      >
                        {{ sale_ratio_info.last_compare }}% ↑
                      </div>
                      <div
                        class="float-right down-number"
                        v-if="sale_ratio_info.last_compare < 0"
                      >
                        {{ sale_ratio_info.last_compare * -1 }}% ↓
                      </div>
                      <div
                        class="float-right down-number"
                        v-if="sale_ratio_info.last_compare == 0"
                      >
                        {{ sale_ratio_info.last_compare }}
                      </div>
                      <div
                        class="float-right down-number"
                        v-if="sale_ratio_info.last_compare == '--'"
                      >
                        {{ sale_ratio_info.last_compare }}
                      </div>
                    </div>
                  </span>
                  <!-- 新增读者 -->
                  <span
                    :class="
                      typeText == 'reader_incr'
                        ? 'data-block float-left active'
                        : 'data-block float-left'
                    "
                    @click="coreTypeChange('reader_incr')"
                  >
                    <div>
                      <a-icon type="line-chart" />
                      <span class="secondary-font">新增读者</span>
                    </div>
                    <div class="data-font" v-if="reader_incr_info.now">
                      {{ reader_incr_info.now.toLocaleString() }}
                    </div>
                    <div class="data-font" v-else>0</div>
                    <div class="clearfix compare" style="width: 160px">
                      <div class="float-left" v-if="dateType == 1">
                        昨日对比
                      </div>
                      <div class="float-left" v-if="dateType == 2">
                        上周对比
                      </div>
                      <div class="float-left" v-if="dateType == 3">
                        上月对比
                      </div>
                      <div class="float-left" v-if="dateType == 4">
                        上年对比
                      </div>
                      <div
                        class="float-right up-number"
                        v-if="reader_incr_info.pre_compare > 0"
                      >
                        {{ reader_incr_info.pre_compare }}% ↑
                      </div>
                      <div
                        class="float-right down-number"
                        v-if="reader_incr_info.pre_compare < 0"
                      >
                        {{ reader_incr_info.pre_compare * -1 }}% ↓
                      </div>
                      <div
                        class="float-right down-number"
                        v-if="reader_incr_info.pre_compare == 0"
                      >
                        {{ reader_incr_info.pre_compare }}
                      </div>
                      <div
                        class="float-right down-number"
                        v-if="reader_incr_info.pre_compare == '--'"
                      >
                        {{ reader_incr_info.pre_compare }}
                      </div>
                    </div>
                    <div class="clearfix compare" style="width: 160px">
                      <div class="float-left">上年同期</div>
                      <div
                        class="float-right up-number"
                        v-if="reader_incr_info.last_compare > 0"
                      >
                        {{ reader_incr_info.last_compare }}% ↑
                      </div>
                      <div
                        class="float-right down-number"
                        v-if="reader_incr_info.last_compare < 0"
                      >
                        {{ reader_incr_info.last_compare * -1 }}% ↓
                      </div>
                      <div
                        class="float-right down-number"
                        v-if="reader_incr_info.last_compare == 0"
                      >
                        {{ reader_incr_info.last_compare }}
                      </div>
                      <div
                        class="float-right down-number"
                        v-if="reader_incr_info.last_compare == '--'"
                      >
                        {{ reader_incr_info.last_compare }}
                      </div>
                    </div>
                  </span>
                  <!-- 动销品种数 -->
                  <span
                    :class="
                      typeText == 'on_sale_goods'
                        ? 'data-block float-left active'
                        : 'data-block float-left'
                    "
                    @click="coreTypeChange('on_sale_goods')"
                  >
                    <div>
                      <a-icon type="line-chart" />
                      <span class="secondary-font">动销品种数</span>
                    </div>
                    <div class="data-font" v-if="onsale_goods_info.now">
                      {{ onsale_goods_info.now.toLocaleString() }}
                    </div>
                    <div class="data-font" v-else>0</div>
                    <div class="clearfix compare" style="width: 160px">
                      <div class="float-left" v-if="dateType == 1">
                        昨日对比
                      </div>
                      <div class="float-left" v-if="dateType == 2">
                        上周对比
                      </div>
                      <div class="float-left" v-if="dateType == 3">
                        上月对比
                      </div>
                      <div class="float-left" v-if="dateType == 4">
                        上年对比
                      </div>
                      <div
                        class="float-right up-number"
                        v-if="onsale_goods_info.pre_compare > 0"
                      >
                        {{ onsale_goods_info.pre_compare }}% ↑
                      </div>
                      <div
                        class="float-right down-number"
                        v-if="onsale_goods_info.pre_compare < 0"
                      >
                        {{ onsale_goods_info.pre_compare * -1 }}% ↓
                      </div>
                      <div
                        class="float-right down-number"
                        v-if="onsale_goods_info.pre_compare == 0"
                      >
                        {{ onsale_goods_info.pre_compare }}
                      </div>
                      <div
                        class="float-right down-number"
                        v-if="onsale_goods_info.pre_compare == '--'"
                      >
                        {{ onsale_goods_info.pre_compare }}
                      </div>
                    </div>
                    <div class="clearfix compare" style="width: 160px">
                      <div class="float-left">上年同期</div>
                      <div
                        class="float-right up-number"
                        v-if="onsale_goods_info.last_compare > 0"
                      >
                        {{ onsale_goods_info.last_compare }}% ↑
                      </div>
                      <div
                        class="float-right down-number"
                        v-if="onsale_goods_info.last_compare < 0"
                      >
                        {{ onsale_goods_info.last_compare * -1 }}% ↓
                      </div>
                      <div
                        class="float-right down-number"
                        v-if="onsale_goods_info.last_compare == 0"
                      >
                        {{ onsale_goods_info.last_compare }}
                      </div>
                      <div
                        class="float-right down-number"
                        v-if="onsale_goods_info.last_compare == '--'"
                      >
                        {{ onsale_goods_info.last_compare }}
                      </div>
                    </div>
                  </span>
                </div>
                <!-- 折线图 -->
                <div style="margin-top: 20px">
                  <div id="broken-line" v-if="brokenLineData.length > 0"></div>
                  <div style="padding: 20px 0" v-else>
                    <a-empty />
                  </div>
                </div>
              </div>
              <div
                class="model-bg"
                style="height: 405px; position: relative"
                v-else
              >
                <ModelNoPower
                  type="noPower"
                  :id="corePowerID"
                  :organizeId="$refs.head.publishInfo.organization_id"
                ></ModelNoPower>
              </div>
            </div>
            <!-- 渠道数据 -->
            <div v-if="showChannel">
              <div
                class="model-container"
                v-for="(item, index) in channelList"
                :key="index"
              >
                <div class="model-bg">
                  <div class="channel-data clearfix">
                    <div
                      class="float-left"
                      style="width: 100px; text-align: center; padding: 34px 0"
                      v-if="
                        item.platform_name == '其他' ||
                        item.platform_name == '拼多多'
                      "
                    >
                      <div class="channel-title">{{ item.platform_name }}</div>
                    </div>
                    <div
                      class="float-left"
                      style="width: 100px; text-align: center; padding: 20px 0"
                      v-else
                    >
                      <div class="channel-title">{{ item.platform_name }}</div>
                      <div
                        class="click-font"
                        style="margin-top: 10px"
                        @click="openShop(item)"
                      >
                        进入店铺
                      </div>
                    </div>
                    <span
                      style="margi-left: 15px; margin-right: 20px"
                      class="data-block float-left"
                    >
                      <div class="clearfix">
                        <div class="float-left" style="width: 120px">
                          <div>
                            <a-icon type="line-chart" />
                            <span class="secondary-font">销售指数</span>
                          </div>
                          <div class="data-font" v-if="item.sale_amount">
                            {{ item.sale_amount.toLocaleString() }}
                          </div>
                          <div class="data-font" v-else>0</div>
                        </div>
                        <div class="float-right" style="width: 135px">
                          <div class="clearfix compare">
                            <div class="float-left">占比</div>
                            <div
                              class="float-right main-number"
                              v-if="item.sale_ratio"
                            >
                              {{
                                item.sale_ratio == "--"
                                  ? item.sale_ratio
                                  : (item.sale_ratio * 100).toFixed(2) + "%"
                              }}
                            </div>
                            <div class="float-right main-number" v-else>--</div>
                          </div>
                          <div class="clearfix compare" style="width: 135px">
                            <div class="float-left" v-if="dateType == 1">
                              昨日对比
                            </div>
                            <div class="float-left" v-if="dateType == 2">
                              上周对比
                            </div>
                            <div class="float-left" v-if="dateType == 3">
                              上月对比
                            </div>
                            <div class="float-left" v-if="dateType == 4">
                              上年对比
                            </div>
                            <div
                              class="float-right up-number"
                              v-if="item.pre_compare > 0"
                            >
                              {{ item.pre_compare }}% ↑
                            </div>
                            <div
                              class="float-right down-number"
                              v-if="item.pre_compare < 0"
                            >
                              {{ item.pre_compare * -1 }}% ↓
                            </div>
                            <div
                              class="float-right down-number"
                              v-if="item.pre_compare == 0"
                            >
                              {{ item.pre_compare }}
                            </div>
                            <div
                              class="float-right down-number"
                              v-if="item.pre_compare == '--'"
                            >
                              {{ item.pre_compare }}
                            </div>
                          </div>
                          <div class="clearfix compare" style="width: 135px">
                            <div class="float-left">上年同期</div>
                            <div
                              class="float-right up-number"
                              v-if="item.last_compare > 0"
                            >
                              {{ item.last_compare }}% ↑
                            </div>
                            <div
                              class="float-right down-number"
                              v-if="item.last_compare < 0"
                            >
                              {{ item.last_compare * -1 }}% ↓
                            </div>
                            <div
                              class="float-right down-number"
                              v-if="item.last_compare == 0"
                            >
                              {{ item.last_compare }}
                            </div>
                            <div
                              class="float-right down-number"
                              v-if="item.last_compare == '--'"
                            >
                              {{ item.last_compare }}
                            </div>
                          </div>
                        </div>
                      </div>
                    </span>
                    <!-- 图表 -->
                    <div class="float-left">
                      <div
                        style="width: 600px"
                        :id="'channel-chart' + (index + 1)"
                      ></div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="model-container" v-if="powerType == 1">
              <div class="model-bg channel-text" @click="changeChannel">
                {{ showChannel ? "隐藏渠道数据" : "展开渠道数据" }}
              </div>
            </div>
            <!-- 品种 -->
            <div class="model-container variety">
              <div class="section-title clearfix model-bg">
                <div class="float-left">品种</div>
                <router-link to="/publish/taopu100">
                  <div class="float-right click-font">进入本社品种</div>
                </router-link>
              </div>
              <div class="table model-bg" v-if="goodsPower">
                <table style="table-layout: fixed">
                  <colgroup>
                    <col width="50" />
                    <col width="230" />
                    <col width="150" />
                    <col width="140" />
                    <col width="140" />
                    <col width="100" />
                    <col width="80" />
                    <col width="80" />
                    <col width="80" />
                  </colgroup>
                  <thead>
                    <tr>
                      <td>排名</td>
                      <td>品种</td>
                      <td>作者</td>
                      <td style="text-align: center">出版社</td>
                      <td>类目</td>
                      <td style="text-align: right">销售指数</td>
                      <td style="text-align: right">上期对比</td>
                      <td style="text-align: right">行业排名</td>
                      <td style="text-align: right">类目排名</td>
                    </tr>
                  </thead>
                  <tbody v-if="goodsRankList.length > 0">
                    <tr v-for="(item, index) in goodsRankList" :key="index">
                      <td>{{ item.sale_rank }}</td>
                      <td>
                        <div class="goods-desc">
                          <span class="goods-image" v-if="item.cover_pic">
                            <img
                              :src="item.cover_pic"
                              alt
                              style="width: 40px; height: 40px"
                            />
                            <div
                              class="goods-logo prev"
                              v-if="item.is_presale == 1"
                            >
                              预
                            </div>
                            <div
                              class="goods-logo group"
                              v-else-if="item.have_presale == 1"
                            >
                              组
                            </div>
                          </span>
                          <span
                            v-else
                            class="no-pic"
                            style="min-width: 40px; min-height: 40px"
                          ></span>
                          <span
                            class="click-font goods-name"
                            :title="item.goods_name"
                            @click.stop="$toDetail(item.goods_id)"
                            >{{ item.goods_name }}</span
                          >
                        </div>
                      </td>
                      <td>
                        <div class="author">
                          <div
                            class="author-name"
                            v-if="item.authors.length == 0"
                          >
                            {{ item.goods_author }}
                          </div>
                          <div
                            class="author-name click-font"
                            @click.stop="$toAuthor(item.authors[0].author_id)"
                            v-if="item.authors.length == 1"
                          >
                            {{ item.goods_author }}
                          </div>
                          <div
                            v-if="item.authors.length > 1"
                            class="author-name click-font"
                            @click.stop="openAuthor(item, index)"
                          >
                            {{ item.goods_author }}
                          </div>
                          <div class="author-list" v-if="item.active">
                            <div v-if="item.authors.length > 0">
                              <div
                                class="author-item click"
                                v-for="(aitem, aindex) in item.authors"
                                :key="aindex"
                                @click.stop="$toAuthor(aitem.author_id)"
                              >
                                {{ aitem.name }}
                              </div>
                            </div>
                            <div v-else>
                              <div class="author-item">
                                未查询到对应作者信息
                              </div>
                            </div>
                          </div>
                        </div>
                      </td>
                      <td style="text-align: center">
                        {{ item.publisher_name }}
                      </td>
                      <td>
                        <span class="main-font"
                          >{{ item.cate_node_2 }}
                          <span v-if="item.cate_node_3"
                            >> {{ item.cate_node_3 }}</span
                          ></span
                        >
                      </td>
                      <td style="text-align: right">
                        <span class="main-font">{{
                          item.sale_total.toLocaleString()
                        }}</span>
                      </td>
                      <td style="text-align: right">
                        <span class="percent" v-if="item.compare_rate > 0"
                          >+{{ item.compare_rate }}%</span
                        >
                        <span class="green" v-else-if="item.compare_rate < 0"
                          >{{ item.compare_rate }}%</span
                        >
                        <span v-else>--</span>
                      </td>
                      <td style="text-align: right">
                        {{ item.in_all_rank }}
                      </td>
                      <td style="text-align: right">
                        {{ item.in_all_cate_rank }}
                      </td>
                    </tr>
                  </tbody>
                  <tbody v-else>
                    <tr>
                      <td colspan="9">
                        <a-empty />
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
              <div
                class="model-bg"
                style="height: 345px; position: relative"
                v-else
              >
                <ModelNoPower
                  type="noPower"
                  :id="goodsPowerID"
                  :organizeId="$refs.head.publishInfo.organization_id"
                ></ModelNoPower>
              </div>
            </div>
            <!-- 地域 -->
            <div class="model-container area">
              <div class="section-title clearfix model-bg">
                <div class="float-left">地域</div>
                <router-link to="/publish/region">
                  <div class="float-right click-font">进入地域分布</div>
                </router-link>
              </div>
              <div v-if="regionPower">
                <div class="clearfix model-bg" v-if="barData.length > 0">
                  <div class="content float-left">
                    <div id="map" style="height: 284px; width: 100%"></div>
                  </div>
                  <div
                    class="content float-left"
                    style="width: 500px; margin-left: 50px"
                  >
                    <p class="desc">地域（省）</p>
                    <div>
                      <div
                        style="
                          width: 500px;
                          display: inline-block;
                          vertical-align: top;
                        "
                      >
                        <div id="bar-chart"></div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="model-bg" v-else>
                  <div class="no-data">基础数据不足，暂无分析</div>
                </div>
              </div>
              <div
                class="model-bg"
                style="height: 340px; position: relative"
                v-else
              >
                <ModelNoPower
                  type="noPower"
                  :id="regionPowerID"
                  :organizeId="$refs.head.publishInfo.organization_id"
                ></ModelNoPower>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <Loading ref="load" :show="1" :isLoading="isLoading"></Loading>
  </div>
</template>

<style lang="scss" scoped src="@/style/scss/pages/publish/index.scss"></style>

<script>
import { Chart, registerShape } from "@antv/g2";
import { Scene } from "@antv/l7";
import { CountryLayer } from "@antv/l7-district";
import { Mapbox } from "@antv/l7-maps";
import {
  MYVIEW_PUBLISHERINFO,
  MYVIEW_GOODSRANK,
  MYVIEW_REGIONRANK,
  MYVIEW_KERNELCHART,
  MYVIEW_KERNELDATA,
  MYVIEW_PLATFORMCHART,
} from "../../apis/publish.js";
import { COMMON_PUBLISHERCATEGORY } from "../../apis/common.js";
export default {
  data() {
    return {
      powerType: 2,
      generalPower: true,
      corePower: true,
      goodsPower: true,
      regionPower: true,
      generalPowerID: 0,
      corePowerID: 0,
      goodsPowerID: 0,
      regionPowerID: 0,
      cowData: [
        { type: "新品品种", sold: 0 },
        { type: "一般品种", sold: 0 },
        { type: "常销品种", sold: 0 },
        { type: "畅销品种", sold: 0 },
        { type: "滞销品种", sold: 0 },
      ],
      radarData: [
        { type: "1000册以上", sold: 0 },
        { type: "500~1000册", sold: 0 },
        { type: "100~500册", sold: 0 },
        { type: "10~100册", sold: 0 },
        { type: "10册以下", sold: 0 },
      ],
      brokenLineData: [],
      eventList: [],
      barData: [],
      barMapData: [],
      account: {
        on_sale_num: 0, // 在售品种数
        reader_num: 0, // 读者基数
      },
      goodsRankList: [],
      categoryList: [],
      chooseCategory: [0],
      catePopup: false,
      typeText: "sale_total",
      cowChart: null,
      radarChart: null,
      radardv: null,
      changeChart: null,
      mapChart: null,
      barChart: null,
      sale_total_info: {
        // 销售指数
        now: 0, // 当前
        pre_compare: 0, // 上月对比
        last_compare: 0, // 去年同期
      },
      sale_rank_info: {
        // 销售排名
        now: 0,
        pre_compare: 0,
        last_compare: 0,
      },
      sale_ratio_info: {
        // 行业占比
        now: 0,
        pre_compare: 0,
        last_compare: 0,
      },
      reader_incr_info: {
        // 新增读者
        now: 0,
        pre_compare: 0,
        last_compare: 0,
      },
      onsale_goods_info: {
        // 动销品种数
        now: 0,
        pre_compare: 0,
        last_compare: 0,
      },
      dateType: 0,
      isLoading: true,
      // 渠道数据
      showChannel: false,
      channelList: [],
      channelChart: [null, null, null, null, null, null, null],
      tmList: [],
      jdList: [],
      ddList: [],
      wphList: [],
      pddList: [],
      gwList: [],
      otherList: [],
      timeList: [],
      channelFirst: true,
    };
  },
  mounted() {
    this.dateType = this.$refs.time.dateType;
    this.powerType = this.$refs.head.accountInfo.type;
    this.getData();
    this.getGoods();
    this.getRegion();
    this.getFirstCategory();
    this.getCore();
    this.getCoreData();
  },
  methods: {
    // 综合概况数据
    async getData() {
      var tStamp = this.$getTimeStamp();
      let data = {
        organization_id: this.$refs.head.publishInfo.organization_id,
        supplier_id: this.$refs.head.publishInfo.supplier_id,
        timestamp: tStamp,
      };
      data.sign = this.$getSign(data);
      let res = await MYVIEW_PUBLISHERINFO(data);
      if (res.code == 0) {
        this.generalPower = true;
        this.account = res.data;
        let _count = res.data.sale_type_data.total,
          _total = res.data.sale_level_data.total;
        this.cowData = this.cowData.map((value, key) => {
          if (value.type == "滞销品种") {
            value.count = res.data.sale_type_data.unsalable;
            value.sold = res.data.sale_type_data.unsalable
              ? Number(
                  ((res.data.sale_type_data.unsalable / _count) * 100).toFixed(
                    2
                  )
                )
              : 0;
          } else if (value.type == "一般品种") {
            value.count = res.data.sale_type_data.normal;
            value.sold = res.data.sale_type_data.normal
              ? Number(
                  ((res.data.sale_type_data.normal / _count) * 100).toFixed(2)
                )
              : 0;
          } else if (value.type == "常销品种") {
            value.count = res.data.sale_type_data.frequently;
            value.sold = res.data.sale_type_data.frequently
              ? Number(
                  ((res.data.sale_type_data.frequently / _count) * 100).toFixed(
                    2
                  )
                )
              : 0;
          } else if (value.type == "畅销品种") {
            value.count = res.data.sale_type_data.popular;
            value.sold = res.data.sale_type_data.popular
              ? Number(
                  ((res.data.sale_type_data.popular / _count) * 100).toFixed(2)
                )
              : 0;
          } else if (value.type == "新品品种") {
            value.count = res.data.sale_type_data.new;
            value.sold = res.data.sale_type_data.new
              ? Number(
                  ((res.data.sale_type_data.new / _count) * 100).toFixed(2)
                )
              : 0;
          }
          return value;
        });
        this.radarData = this.radarData.map((value, key) => {
          if (value.type == "1000册以上") {
            value.sold = res.data.sale_level_data.level_1
              ? Number(
                  ((res.data.sale_level_data.level_1 / _total) * 100).toFixed(2)
                )
              : 0;
          } else if (value.type == "500~1000册") {
            value.sold = res.data.sale_level_data.level_2
              ? Number(
                  ((res.data.sale_level_data.level_2 / _total) * 100).toFixed(2)
                )
              : 0;
          } else if (value.type == "100~500册") {
            value.sold = res.data.sale_level_data.level_3
              ? Number(
                  ((res.data.sale_level_data.level_3 / _total) * 100).toFixed(2)
                )
              : 0;
          } else if (value.type == "10~100册") {
            value.sold = res.data.sale_level_data.level_4
              ? Number(
                  ((res.data.sale_level_data.level_4 / _total) * 100).toFixed(2)
                )
              : 0;
          } else if (value.type == "10册以下") {
            value.sold = res.data.sale_level_data.level_5
              ? Number(
                  ((res.data.sale_level_data.level_5 / _total) * 100).toFixed(2)
                )
              : 0;
          }
          return value;
        });
        let _this = this;
        this.$nextTick(()=>{
          if(_this.cowChart){
            _this.cowChart.destroy();
            _this.initData();
          }else{
            _this.initData();
          }
          if(_this.radarChart){
            _this.radarChart.destroy();
            _this.initRadarData();
          }else{
            _this.initRadarData();
          }
        })
      } else {
        if (res.code == 1009) {
          this.generalPower = false;
          this.generalPowerID = res.data;
        } else {
          this.$refs.head.globalTip(1, res.message, res.code);
        }
      }
    },
    // 品种排行
    async getGoods() {
      var tStamp = this.$getTimeStamp();
      let data = {
        organization_id: this.$refs.head.publishInfo.organization_id,
        supplier_id: this.$refs.head.publishInfo.supplier_id,
        period: this.$refs.time.cycle,
        date_type: this.$refs.time.dateType,
        start_date: this.$refs.time.oneDay,
        goods_cate: this.chooseCategory[this.chooseCategory.length - 1],
        timestamp: tStamp,
      };
      if (this.chooseCategory[0] !== 0) {
        data.cate_level = this.chooseCategory.length == 1 ? "one" : "two";
      }
      data.sign = this.$getSign(data);
      let res = await MYVIEW_GOODSRANK(data);
      if (res.code == 0) {
        this.goodsRankList = [];
        res.data.map((value, key) => {
          value.active = false;
          this.goodsRankList.push(value);
        });
        this.goodsPower = true;
        this.$nextTick(() => {
          this.isLoading = false;
        });
      } else {
        this.isLoading = false;
        if (res.code == 1009) {
          this.goodsPower = false;
          this.goodsPowerID = res.data;
        } else {
          this.$refs.head.globalTip(1, res.message, res.code);
        }
      }
    },
    // 地域排行
    async getRegion() {
      var tStamp = this.$getTimeStamp();
      let data = {
        organization_id: this.$refs.head.publishInfo.organization_id,
        supplier_id: this.$refs.head.publishInfo.supplier_id,
        period:
          this.$refs.time.dateType == 1
            ? this.$getCurrenWeek(this.$refs.time.dateText)
            : this.$refs.time.cycle,
        date_type: this.$refs.time.dateType == 1 ? 2 : this.$refs.time.dateType,
        goods_cate: this.chooseCategory[this.chooseCategory.length - 1],
        timestamp: tStamp,
      };
      if (this.chooseCategory[0] !== 0) {
        data.cate_level = this.chooseCategory.length == 1 ? "one" : "two";
      }
      data.sign = this.$getSign(data);
      let res = await MYVIEW_REGIONRANK(data);
      if (res.code == 0) {
        this.regionPower = true;
        this.barMapData = [];
        this.barData = [];
        this.barData = res.data.splice(0, 10).map((value, key) => {
          this.barMapData.push(value.region_name);
          value.region_name = value.region_name;
          return value;
        });
        this.barData = this.barData.reverse();
        if (this.barData.length > 0) {
          this.$nextTick(() => {
            if (this.barChart) {
              this.barChart.destroy();
              this.initBar();
            } else {
              this.initBar();
            }
            this.initMap();
            this.isLoading = false;
          });
        } else {
          this.isLoading = false;
        }
      } else {
        this.isLoading = false;
        if (res.code == 1009) {
          this.regionPower = false;
          this.regionPowerID = res.data;
        } else {
          this.$refs.head.globalTip(1, res.message, res.code);
        }
      }
    },
    // 获取初级分类列表
    async getFirstCategory() {
      var tStamp = this.$getTimeStamp();
      let data = {
        supplier_id: this.$refs.head.publishInfo.supplier_id,
        // floor: 2,
        timestamp: tStamp,
      };
      data.sign = this.$getSign(data);
      let res = await COMMON_PUBLISHERCATEGORY(data);
      if (res.code == 0) {
        this.categoryList = [];
        let _data = {
          category_id: 0,
          name: "所有类目",
          pid: 0,
        };
        this.categoryList.push(_data);
        res.data.map((value, key) => {
          this.categoryList.push(value);
        });
      } else {
        this.$refs.head.globalTip(1, res.message, res.code);
      }
    },
    // 获取核心数据
    async getCore() {
      var tStamp = this.$getTimeStamp();
      let data = {
        organization_id: this.$refs.head.publishInfo.organization_id,
        supplier_id: this.$refs.head.publishInfo.supplier_id,
        date_type: this.$refs.time.dateType,
        start_date: this.$refs.time.oneDay,
        goods_cate: this.chooseCategory[this.chooseCategory.length - 1],
        period: this.$refs.time.cycle,
        timestamp: tStamp,
      };
      if (this.chooseCategory[0] !== 0) {
        data.cate_level = this.chooseCategory.length == 1 ? "one" : "two";
      }
      data.sign = this.$getSign(data);
      let res = await MYVIEW_KERNELDATA(data);
      if (res.code == 0) {
        this.corePower = true;
        this.sale_total_info = res.data.sale_total_info;
        this.sale_rank_info = res.data.sale_rank_info;
        this.sale_ratio_info = res.data.sale_ratio_info;
        this.reader_incr_info = res.data.reader_incr_info;
        this.onsale_goods_info = res.data.onsale_goods_info;
      } else {
        if (res.code == 1009) {
          this.corePower = false;
          this.corePowerID = res.data;
        } else {
          this.$refs.head.globalTip(1, res.message, res.code);
        }
      }
    },
    // 获取核心数据图形
    async getCoreData() {
      var tStamp = this.$getTimeStamp();
      let data = {
        organization_id: this.$refs.head.publishInfo.organization_id,
        supplier_id: this.$refs.head.publishInfo.supplier_id,
        date_type: this.$refs.time.dateType,
        start_date: this.$refs.time.oneDay,
        type: this.typeText,
        goods_cate: this.chooseCategory[this.chooseCategory.length - 1],
        period: this.$refs.time.cycle,
        timestamp: tStamp,
      };
      if (this.chooseCategory[0] !== 0) {
        data.cate_level = this.chooseCategory.length == 1 ? "one" : "two";
      }
      data.sign = this.$getSign(data);
      let res = await MYVIEW_KERNELCHART(data);
      if (res.code == 0) {
        this.corePower = true;
        let _arr1 = [],
          _arr2 = [];
        this.brokenLineData = [];
        this.eventList = [];
        this.eventList = res.data.event_data;
        this.timeList = [];
        res.data.current_data.map((value, key) => {
          let _obj = {};
          _obj.month = value.date.toString();
          _obj.city = "当期";
          _obj.temperature = value.value;
          if (value.week_range) {
            _obj.range = value.week_range;
          }
          this.timeList.unshift(value.date.toString());
          _arr1.unshift(_obj);
        });
        res.data.last_data.map((value, key) => {
          let _obj = {};
          _obj.month = value.date.toString();
          _obj.city = "上年同期";
          _obj.temperature = value.value;
          if (value.week_range) {
            _obj.range = value.week_range;
          }
          _arr2.unshift(_obj);
        });
        _arr1.map((value, key) => {
          if (_arr1.length > key) this.brokenLineData.push(_arr1[key]);
          if (_arr2.length > key) this.brokenLineData.push(_arr2[key]);
        });
        if (this.brokenLineData.length > 0) {
          let _this = this;
          this.$nextTick(()=>{
            if(_this.changeChart){
              _this.changeChart.destroy();
              _this.initLineData();
            }else{
              _this.initLineData();
            }
          })
        }
        this.$nextTick(() => {
          this.isLoading = false;
        });
      } else {
        this.isLoading = false;
        if (res.code == 1009) {
          this.corePower = false;
          this.corePowerID = res.data;
        } else {
          this.$refs.head.globalTip(1, res.message, res.code);
        }
      }
    },
    // 获取渠道数据
    async getChannel() {
      var tStamp = this.$getTimeStamp();
      let data = {
        organization_id: this.$refs.head.publishInfo.organization_id,
        supplier_id: this.$refs.head.publishInfo.supplier_id,
        date_type: this.$refs.time.dateType,
        start_date: this.$refs.time.oneDay,
        period: this.$refs.time.cycle,
        goods_cate: this.chooseCategory[this.chooseCategory.length - 1],
        timestamp: tStamp,
      };
      data.sign = this.$getSign(data);
      let res = await MYVIEW_PLATFORMCHART(data);
      if (res.code == 0) {
        this.showChannel = true;
        this.channelList = [];
        this.tmList = [];
        this.jdList = [];
        this.ddList = [];
        this.wphList = [];
        this.pddList = [];
        this.gwList = [];
        this.otherList = [];
        this.channelList = res.data;
        res.data.map((value, key) => {
          let _arr1 = [],
            _arr2 = [],
            _arr = [];
          value.current_data.map((value1, key1) => {
            let _obj = {};
            _obj.month = value1.date.toString();
            _obj.city = "当期";
            _obj.temperature = value1.value;
            if (value1.week_range) {
              _obj.range = value1.week_range;
            }
            _arr1.unshift(_obj);
          });
          value.last_data.map((value1, key1) => {
            let _obj = {};
            _obj.month = value1.date.toString();
            _obj.city = "上年同期";
            _obj.temperature = value1.value;
            if (value1.week_range) {
              _obj.range = value1.week_range;
            }
            _arr2.unshift(_obj);
          });
          _arr1.map((value1, key1) => {
            if (_arr1.length > key1) _arr.push(_arr1[key1]);
            if (_arr2.length > key1) _arr.push(_arr2[key1]);
          });
          if (value.platform_name == "天猫") {
            this.tmList = _arr;
          } else if (value.platform_name == "京东") {
            this.jdList = _arr;
          } else if (value.platform_name == "当当") {
            this.ddList = _arr;
          } else if (value.platform_name == "官网") {
            this.gwList = _arr;
          } else if (value.platform_name == "唯品会") {
            this.wphList = _arr;
          } else if (value.platform_name == "拼多多") {
            this.pddList = _arr;
          } else if (value.platform_name == "其他") {
            this.otherList = _arr;
          }
        });
        let _this = this;
        this.$nextTick(() => {
          if (_this.channelFirst) {
            _this.initChannel();
          } else {
            for (let i = 0; i < _this.channelChart.length; i++) {
              _this.channelChart[i].destroy();
            }
            _this.initChannel();
          }
          _this.channelFirst = false;
          this.isLoading = false;
        });
      } else {
        this.isLoading = false;
        if (res.code == 1009) {
          this.$refs.head.globalTip(1, "暂无权限", 0);
        } else {
          this.$refs.head.globalTip(1, res.message, res.code);
        }
      }
    },
    // 点击分类
    cateClick() {
      this.catePopup = true;
      this.$refs.time.showYear = false;
      this.goodsRankList = this.goodsRankList.map((value, key) => {
        value.active = false;
        return value;
      });
    },
    bodyClick() {
      this.$refs.time.showYear = false;
      this.catePopup = false;
      this.goodsRankList = this.goodsRankList.map((value, key) => {
        value.active = false;
        return value;
      });
    },
    closeDom() {
      this.catePopup = false;
      this.goodsRankList = this.goodsRankList.map((value, key) => {
        value.active = false;
        return value;
      });
    },
    // 多个作者
    openAuthor(item, index) {
      this.$refs.time.showYear = false;
      this.catePopup = false;
      this.goodsRankList = this.goodsRankList.map((value, key) => {
        if (index == key) {
          value.active = true;
        } else {
          value.active = false;
        }
        return value;
      });
    },
    // 选择时间
    changeTime() {
      this.isLoading = true;
      this.dateType = this.$refs.time.dateType;
      this.getGoods();
      this.getRegion();
      this.getCore();
      this.getCoreData();
      if (this.showChannel) {
        this.getChannel();
      }
    },
    // 渲染在售品种结构饼图
    initData() {
      let data = this.cowData,
        _this = this;
      // 可以通过调整这个数值控制分割空白处的间距，0-1 之间的数值
      const sliceNumber = 0.003;
      // 自定义 other 的图形，增加两条线
      registerShape("interval", "slice-shape", {
        draw(cfg, container) {
          const points = cfg.points;
          let path = [];
          path.push(["M", points[0].x, points[0].y]);
          path.push(["L", points[1].x, points[1].y - sliceNumber]);
          path.push(["L", points[2].x, points[2].y - sliceNumber]);
          path.push(["L", points[3].x, points[3].y]);
          path.push("Z");
          path = this.parsePath(path);
          return container.addShape("path", {
            attrs: {
              fill: cfg.color,
              path,
            },
          });
        },
      });

      this.cowChart = new Chart({
        container: "cow-chart", // 指定图表容器 ID
        autoFit: true,
        height: 150,
        padding: [0, 0, 0, -240],
      });

      this.cowChart.data(data);
      this.cowChart.scale("sold", {
        formatter: (val) => {
          // val = val * 100 + "%";
          return val;
        },
      });
      this.cowChart.coordinate("theta", {
        radius: 0.75,
        innerRadius: 0.7,
      });
      this.cowChart.legend("type", {
        position: "right", // 配置图例显示位置
        custom: true, // 关键字段，告诉 G2，要使用自定义的图例
        offsetX: -130,
        items: data.map((obj, index) => {
          return {
            name: obj.type, // 对应 itemName
            value: obj.sold, // 对应 itemValue
            count: obj.count,
            marker: {
              symbol: "circle", // marker 的形状
              style: {
                r: 5, // marker 图形半径
                // fill: _this.cowChart.getTheme().colors10[index],
                fill: ["#7BE07C", "#38AA20", "#FFD147", "#FC6F28", "#DAE2E7"][
                  index
                ],
              },
            }, // marker 配置
          };
        }),
        itemName: {
          style: {
            fill: "#07193F",
          },
        },
        itemValue: {
          style: {
            fill: "#07193F",
            fontWeight: 900,
          }, // 配置 itemValue 样式
          formatter: (val, obj) => {
            return `\t\t\t\t\t\t\t\t\t\t\t${obj.count}（${val}%）`;
          },
        },
      });
      this.cowChart.tooltip({
        showMarkers: false,
      });
      this.cowChart
        .interval()
        .adjust("stack")
        .position("sold")
        .color("type", (type) => {
          if (type == "新品品种") {
            return "#7BE07C";
          } else if (type == "一般品种") {
            return "#38AA20";
          } else if (type == "常销品种") {
            return "#FFD147";
          } else if (type == "畅销品种") {
            return "#FC6F28";
          } else if (type == "滞销品种") {
            return "#DAE2E7";
          }
        })
        .tooltip("type*sold*count", function (type, sold,count) {
          return {
            title: "在售品种结构",
            name: type,
            value: `${count}（${sold}%）`,
          };
        })
        .shape("slice-shape");
      this.cowChart.interaction("element-active");
      // this.cowChart.removeInteraction("legend-filter");
      // this.cowChart.removeInteraction('legend-active');
      this.cowChart.render();
    },
    // 渲染销售占比结构饼图
    initRadarData() {
      let data = this.radarData,
        _this = this;
      // 可以通过调整这个数值控制分割空白处的间距，0-1 之间的数值
      const sliceNumber = 0.003;
      // 自定义 other 的图形，增加两条线
      registerShape("interval", "slice-shape", {
        draw(cfg, container) {
          const points = cfg.points;
          let path = [];
          path.push(["M", points[0].x, points[0].y]);
          path.push(["L", points[1].x, points[1].y - sliceNumber]);
          path.push(["L", points[2].x, points[2].y - sliceNumber]);
          path.push(["L", points[3].x, points[3].y]);
          path.push("Z");
          path = this.parsePath(path);
          return container.addShape("path", {
            attrs: {
              fill: cfg.color,
              path,
            },
          });
        },
      });

      this.radarChart = new Chart({
        container: "radar", // 指定图表容器 ID
        autoFit: true,
        height: 150,
        padding: [0, 0, 0, -200],
      });

      this.radarChart.data(data);
      this.radarChart.scale("sold", {
        formatter: (val) => {
          return val;
        },
      });
      this.radarChart.coordinate("theta", {
        radius: 0.75,
        innerRadius: 0.7,
      });
      this.radarChart.legend("type", {
        position: "right", // 配置图例显示位置
        custom: true, // 关键字段，告诉 G2，要使用自定义的图例
        offsetX: -100,
        items: data.map((obj, index) => {
          return {
            name: obj.type, // 对应 itemName
            value: obj.sold, // 对应 itemValue
            marker: {
              symbol: "circle", // marker 的形状
              style: {
                r: 5, // marker 图形半径
                // fill: _this.cowChart.getTheme().colors10[index],
                fill: ["#F8121D", "#FC6F28", "#FFCC33", "#EDD78D", "#DAE2E7"][
                  index
                ],
              },
            }, // marker 配置
          };
        }),
        itemName: {
          style: {
            fill: "#07193F",
          },
        },
        itemValue: {
          style: {
            fill: "#07193F",
            fontWeight: 900,
          }, // 配置 itemValue 样式
          alignRight: true,
          formatter: (val, obj) => {
            if (obj.id == "1000册以上") {
              return `\t\t\t\t\t\t\t\t\t\t${val}%`;
            } else if (obj.id == "500~1000册") {
              return `\t\t\t\t\t\t\t\t\t${val}%`;
            } else if (obj.id == "100~500册") {
              return `\t\t\t\t\t\t\t\t\t\t\t${val}%`;
            } else if (obj.id == "10~100册") {
              return `\t\t\t\t\t\t\t\t\t\t\t\t\t${val}%`;
            } else if (obj.id == "10册以下") {
              return `\t\t\t\t\t\t\t\t\t\t\t\t\t\t${val}%`;
            }
          },
        },
      });
      this.radarChart.tooltip({
        showMarkers: false,
      });
      this.radarChart
        .interval()
        .adjust("stack")
        .position("sold")
        .color("type", (type) => {
          if (type == "1000册以上") {
            return "#F8121D";
          } else if (type == "500~1000册") {
            return "#FC6F28";
          } else if (type == "100~500册") {
            return "#FFCC33";
          } else if (type == "10~100册") {
            return "#EDD78D";
          } else if (type == "10册以下") {
            return "#DAE2E7";
          }
        })
        .tooltip("type*sold", function (type, sold) {
          return {
            title: "销售占比结构",
            name: type,
            value: sold + "%",
          };
        })
        .shape("slice-shape");
      this.radarChart.interaction("element-active");
      // this.radarChart.removeInteraction("legend-filter");
      // this.radarChart.removeInteraction('legend-active');
      this.radarChart.render();
    },
    // 折线图
    initLineData() {
      let _this = this;
      this.changeChart = new Chart({
        container: "broken-line",
        autoFit: false,
        width: 1050,
        height: 240,
      });

      this.changeChart.data(this.brokenLineData);
      this.changeChart.scale({
        month: {
          range: [0, 1],
        },
        temperature: {
          nice: true,
          min: 0,
        },
      });
      this.changeChart.tooltip({
        showCrosshairs: true,
        shared: true,
      });

      this.changeChart.axis("month", {
        tickLine: null,
        label: {
          formatter: function (value, item, index) {
            if (_this.$refs.time.dateType == 1) {
              if (index % 2 == 0) {
                return value;
              } else {
                return "";
              }
            } else {
              return value;
            }
          },
          autoHide: false | true,
          autoRotate: false,
        },
      });
      this.changeChart.axis("temperature", {
        tickLine: null,
        line: null,
        label: {
          formatter: (val) => {
            if (_this.typeText == "sale_ratio") {
              return val + "%";
            } else {
              return val;
            }
          },
        },
      });
      this.changeChart.legend(false);
      if (this.$refs.time.dateType == 1) {
        for (let i = 0; i < this.eventList.length; i++) {
          if (_this.eventList[i].start_date == _this.eventList[i].end_date) {
            this.changeChart.annotation().dataMarker({
              position: { month: _this.eventList[i].start_date },
              top: true,
              text: {
                content: _this.eventList[i].title,
                style: {
                  fontSize: 13,
                },
              },
              line: {
                length: 30 + i * 15,
              },
            });
          } else {
            let sdate, edate;
            if (_this.timeList.includes(_this.eventList[i].start_date)) {
              sdate = _this.eventList[i].start_date;
            } else {
              sdate = _this.timeList[0];
            }
            if (_this.timeList.includes(_this.eventList[i].end_date)) {
              edate = _this.eventList[i].end_date;
            } else {
              edate = _this.timeList[_this.timeList.length - 1];
            }
            this.changeChart.annotation().text({
              position: [sdate, "median"],
              content: _this.eventList[i].title,
              style: {
                fill: "#6b6b6b",
                fontWeight: 300,
                textAlign: "start",
                textBaseline: "center",
              },
            });
            this.changeChart.annotation().region({
              start: [sdate, "min"],
              end: [edate, "max"],
              style: {
                lineWidth: 0,
                fill: "#1754D2",
                fillOpacity: 0.05,
                stroke: "#ccc",
              },
            });
          }
        }
      }
      this.changeChart
        .line()
        .position("month*temperature")
        .color("city", (city) => {
          if (city == "上年同期") {
            return "#D1DDF6";
          } else if (city == "当期") {
            return "#5A8BEE";
          }
        })
        .shape("circle")
        .style({ lineWidth: 2 })
        .tooltip(
          "month*temperature*city*range",
          function (month, temperature, city, range) {
            let _title;
            if (_this.$refs.time.dateType == 2) {
              _title = month + "（" + range + "）";
            } else {
              _title = month;
            }
            return {
              title: _title,
              name: city,
              value:
                _this.typeText == "sale_ratio"
                  ? temperature + "%"
                  : temperature,
            };
          }
        );

      this.changeChart
        .point()
        .position("month*temperature")
        .color("city", (city) => {
          if (city == "上年同期") {
            return "#D1DDF6";
          } else if (city == "当期") {
            return "#5A8BEE";
          }
        })
        .tooltip(false)
        .shape("circle");

      this.changeChart.render();
    },
    // 地图
    initMap() {
      let _this = this;
      const scene = new Scene({
        id: "map",
        logoVisible: false,
        map: new Mapbox({
          center: [116.2825, 39.9],
          // center:[0,0],
          pitch: 0,
          style: "blank",
          zoom: 3,
          minZoom: 1,
          maxZoom: 10,
        }),
      });
      scene.setMapStatus({
        dragEnable: false, //是否允许地图拖拽
        keyboardEnable: false, // 是否允许形键盘事件
        doubleClickZoom: false, // 双击放大
        zoomEnable: false, // 滚动缩放
        rotateEnable: false, // 旋转
      });
      const attachMapContainer = document.createElement("div");
      attachMapContainer.id = "attach";
      attachMapContainer.style.cssText =
        "position: absolute;height:80px;width:50px;right:50px;bottom:20px;border:1px solid #F4F7FD;";
      document.getElementById("map").parentElement.append(attachMapContainer);

      scene.on("loaded", () => {
        new CountryLayer(scene, {
          data: [],
          joinBy: ["NAME_CHN", "name"],
          depth: 1,
          provinceStroke: "#FFF",
          stroke: "#D1DDF5",
          countyStroke: "#FFF",
          cityStroke: "#FFF",
          cityStrokeWidth: 0,
          // chinaNationalWidth: 0,
          coastlineWidth: 0,
          chinaNationalStroke: "#D1DDF5",
          label: {
            enable: false,
          },
          fill: {
            color: {
              field: "NAME_CHN",
              values:
                ("name",
                function (value) {
                  let _arr = _this.barMapData;
                  if (value.indexOf(_arr[0]) > -1) {
                    return "#4777D8";
                  } else if (value.indexOf(_arr[1]) > -1) {
                    return "#6E94E1";
                  } else if (value.indexOf(_arr[2]) > -1) {
                    return "#82A3E5";
                  } else if (value.indexOf(_arr[3]) > -1) {
                    return "#96B2E8";
                  } else if (value.indexOf(_arr[4]) > -1) {
                    return "#A0B9EA";
                  } else if (value.indexOf(_arr[5]) > -1) {
                    return "#BDCEF1";
                  } else {
                    return "#D1DDF5";
                  }
                }),
            },
            activeColor: "#4777D8",
          },
          popup: {
            enable: true,
            Html: (props) => {
              return `<span>${props.NAME_CHN}</span>`;
            },
          },
        });
      });

      // 添加附图，附图需要和主图保持一致
      const scene2 = new Scene({
        id: "attach",
        logoVisible: false,
        map: new Mapbox({
          center: [113.60540108435657, 12.833692637803168],
          pitch: 0,
          style: "blank",
          zoom: 1.93,
          minZoom: 0,
          maxZoom: 3,
          interactive: false,
        }),
      });
      scene2.on("loaded", () => {
        new CountryLayer(scene2, {
          data: [],
          label: {
            enable: false,
          },
          popup: {
            enable: true,
          },
          autoFit: false,
          depth: 1,
          fill: {
            color: {
              field: "NAME_CHN",
              values: [
                "#feedde",
                "#fdd0a2",
                "#fdae6b",
                "#fd8d3c",
                "#e6550d",
                "#a63603",
              ],
            },
          },
        });
      });
    },
    // 渲染条形图
    initBar() {
      let _this = this,
        _height = this.barData.length * 26;
      this.barChart = new Chart({
        container: "bar-chart",
        autoFit: true,
        height: _height,
      });
      this.barChart.data(this.barData);
      this.barChart.scale({
        sale_total_rate: {
          max: 150,
          min: 0,
          alias: " ",
        },
      });
      this.barChart.axis("region_name", {
        title: null,
        tickLine: null,
        grid: null,
        line: null,
        label: {
          textStyle: {
            textAlign: "left",
          },
        },
      });

      this.barChart.axis("sale_total_rate", {
        label: null,
        line: null,
        tickLine: null,
        grid: {
          line: {
            style: {
              fillOpacity: 0,
              strokeOpacity: 0,
            },
          },
        },
        title: null,
      });
      this.barChart.legend(false);
      this.barChart.coordinate().transpose();
      this.barChart.tooltip(false);
      this.barChart
        .interval()
        .position("region_name*sale_total_rate")
        .size(8)
        .label("sale_total_rate", {
          style: {
            fill: "#7789af",
            autoHide: false | true,
          },
          // offset: 10,
          content: (originData) => {
            return originData.sale_total_rate + "%";
          },
          remove: false,
        });
      // chart.interaction("element-active");
      this.barChart.render();
    },
    // 选择分类
    selectCategory(value) {
      this.catePopup = false;
      this.isLoading = true;
      this.getGoods();
      this.getRegion();
      this.getCore();
      this.getCoreData();
    },
    // 核心数据tabs类型切换
    coreTypeChange(text) {
      this.typeText = text;
      this.getCoreData();
    },
    // 渠道数据
    changeChannel() {
      if (this.showChannel) {
        this.showChannel = false;
      } else {
        this.getChannel();
      }
    },
    // 进入店铺
    openShop(item) {
      let _url;
      if (item.platform_name == "天猫") {
        _url = "https://bokuts.tmall.com/";
      } else if (item.platform_name == "京东") {
        _url = "https://mall.jd.com/index-38566.html?from=pc";
      } else if (item.platform_name == "当当") {
        _url = "http://shop.dangdang.com/12244";
      } else if (item.platform_name == "官网") {
        _url = "https://www.bookuu.com/";
      } else if (item.platform_name == "唯品会") {
        _url = "https://list.vip.com/mplist.html?storeId=ST42525064";
      }
      this.$openNewPage(2,_url);
    },
    // 渲染渠道图表
    initChannel() {
      let _this = this,
        _data = [];
      for (let i = 0; i < this.channelList.length; i++) {
        if (this.channelList[i].platform_name == "天猫") {
          _data = this.tmList;
        } else if (this.channelList[i].platform_name == "京东") {
          _data = this.jdList;
        } else if (this.channelList[i].platform_name == "当当") {
          _data = this.ddList;
        } else if (this.channelList[i].platform_name == "官网") {
          _data = this.gwList;
        } else if (this.channelList[i].platform_name == "唯品会") {
          _data = this.wphList;
        } else if (this.channelList[i].platform_name == "拼多多") {
          _data = this.pddList;
        } else if (this.channelList[i].platform_name == "其他") {
          _data = this.otherList;
        }
        this.channelChart[i] = new Chart({
          container: "channel-chart" + (i + 1),
          autoFit: false,
          width: 600,
          height: 89,
        });

        this.channelChart[i].data(_data);
        this.channelChart[i].scale({
          month: {
            range: [0, 1],
          },
          temperature: {
            nice: true,
            min: 0,
          },
        });
        this.channelChart[i].tooltip({
          showCrosshairs: true,
          shared: true,
        });

        this.channelChart[i].axis("month", {
          tickLine: null,
          label: {
            formatter: function (value, item, index) {
              if (_this.$refs.time.dateType == 1) {
                if (index % 3 == 0) {
                  return value;
                } else {
                  return "";
                }
              } else if (
                _this.$refs.time.dateType == 2 ||
                _this.$refs.time.dateType == 3
              ) {
                if (index % 2 == 0) {
                  return value;
                } else {
                  return "";
                }
              } else {
                return value;
              }
            },
            autoHide: false | true,
            autoRotate: false,
          },
        });
        this.channelChart[i].axis("temperature", {
          tickLine: null,
          line: null,
          label: {
            formatter: (val) => {
              return val;
            },
          },
        });
        this.channelChart[i].legend(false);
        this.channelChart[i]
          .line()
          .position("month*temperature")
          .color("city", (city) => {
            if (city == "上年同期") {
              return "#D1DDF6";
            } else if (city == "当期") {
              return "#5A8BEE";
            }
          })
          .shape("circle")
          .style({ lineWidth: 2 })
          .tooltip(
            "month*temperature*city*range",
            function (month, temperature, city, range) {
              let _title;
              if (_this.$refs.time.dateType == 2) {
                _title = month + "（" + range + "）";
              } else {
                _title = month;
              }
              return {
                title: _title,
                name: city,
                value: temperature,
              };
            }
          );

        this.channelChart[i]
          .point()
          .position("month*temperature")
          .color("city", (city) => {
            if (city == "上年同期") {
              return "#D1DDF6";
            } else if (city == "当期") {
              return "#5A8BEE";
            }
          })
          .tooltip(false)
          .shape("circle");

        this.channelChart[i].render();
        // 移入当前图表时使得其余图表的 tooltip 也展开
        this.channelChart[i].on("mousemove", (ev) => {
          const position = {
            x: ev.x,
            y: ev.y,
          };
          for (let index = 0; index < _this.channelChart.length; index++) {
            const cha = _this.channelChart[index];
            // if (cha !== _this.channelChart[i]) {
              cha.showTooltip(position);
            // }
          }
        });
        // 移出当前图表时使得其余图表的 tooltip 也隐藏起来
        this.channelChart[i].on("mouseout", () => {
          for (let index = 0; index < _this.channelChart.length; index++) {
            const cha = _this.channelChart[index];
            if (cha !== _this.channelChart[i]) {
              cha.hideTooltip();
            }
          }
        });
      }
    },
    // 头部切换机构触发
    publisherChange() {
      this.isLoading = true;
      this.showChannel = false;
      this.typeText = "sale_total";
      this.chooseCategory = [0];
      this.$refs.time.cycle = this.$beforeDate().replace(/-/g, "");
      this.$refs.time.oneDay = this.$beforeDate().replace(/-/g, "");
      this.$refs.time.chooseDate = this.$beforeDate();
      this.$refs.time.chooseWeek = this.$beforeDate();
      this.$refs.time.chooseMonth = this.$beforeDate();
      this.$refs.time.chooseYear = this.$beforeDate();
      this.$refs.time.dateText = this.$beforeDate();
      this.$refs.time.dateType = 1;
      this.dateType = 1;
      this.$refs.time.canAdd = false;
      this.$refs.time.canSub = true;
      this.$refs.time.showYear = false;
      this.getData();
      this.getGoods();
      this.getRegion();
      this.getFirstCategory();
      this.getCore();
      this.getCoreData();
    },
  },
};
</script>
